<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="login-page">
    <van-nav-bar title="登录" left-arrow @click-left="onBack">
      <template #right>
        <div class="nav-icons">
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="circle-btn"></span>
        </div>
      </template>
    </van-nav-bar>
    <div class="avatar-placeholder"></div>
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field v-model="loginform.Name" name="用户名" label="用户名" placeholder="请输入用户名"
          :rules="[{ required: true, message: '请填写用户名' }]" />
        <van-field v-model="loginform.Pwd" type="password" name="密码" label="密码" placeholder="请输入密码"
          :rules="[{ required: true, message: '请填写密码' }]" />
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          登录
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
import { showToast } from 'vant';
import { axiosr } from '@/http/axiosRead';
import { useUserStore } from '@/stores/counter';

const router = useRouter();
const userStore = useUserStore();

const loginform = reactive({
  Name: '',
  Pwd: ''
})

const onBack = () => {
  history.back();
};

const onSubmit = async () => {
  if (!loginform.Name || !loginform.Pwd) {
    showToast('请输入用户名和密码');
    return;
  }
  try {
    axiosr.get('/Account/Login', { params: loginform }).then((res) => {
      console.log(res.data);
      if (res.data.code === 200 && res.data.data) {
        // 保存用户信息到store和localStorage
        localStorage.setItem('Uid',res.data.data.id)
        const userData = res.data.data.accMsg;
        if (userData && userData.id) {
          userStore.setUserInfo(
            userData.id.toString(), 
            userData.name || userData.realName || '',
            res.data.token || ''
          );
          showToast('登录成功');
          router.push('/home');
        } else {
          showToast('获取用户信息失败');
        }
      } else {
        showToast(res.data.message || res.data.msg || '登录失败');
      }
    })
  } catch (error) {
    console.error('登录错误:', error);
    showToast('网络错误');
  }
};
</script>

<style scoped>
.login-page {
  min-height: 100vh;
  background: #f8f9fa;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.van-nav-bar {
  width: 100%;
}

.avatar-placeholder {
  width: 100px;
  height: 100px;
  background: #eaf3fb;
  border-radius: 12px;
  margin: 48px auto 32px auto;
}

.van-form {
  width: 90%;
  max-width: 400px;
  margin: 0 auto;
}

.nav-icons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dot {
  width: 6px;
  height: 6px;
  background: #d8d8d8;
  border-radius: 50%;
  display: inline-block;
}

.circle-btn {
  width: 18px;
  height: 18px;
  border: 1.5px solid #d8d8d8;
  border-radius: 50%;
  display: inline-block;
  margin-left: 6px;
}
</style>